<template>
  <div>
    <!-- 头标 -->
    <el-row>
      <el-col>
        <h2 class="head">
          <slot name="head">{{ date }}人事报表</slot>
        </h2>
      </el-col>
    </el-row>
    <!-- tab栏 -->
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane :label="tabName" name="tab" />
      </el-tabs>
    </el-row>
    <!-- 表格内容 -->
    <el-row>
      <!-- 导出按钮 -->
      <el-row type="flex" justify="space-between" align="middle">
        <el-col>
          <el-row v-if="disShow" type="flex" justify="start" class="tagTitle">
            <div><el-tag color="#cfeffe" />已离职</div>
            <div><el-tag color="#a8f8bb" />再入职</div>
            <div><el-tag color="#fedbd7" />公司合计</div>
            <div><el-tag color="#ffe8c9" />一级部门</div>
            <div><el-tag color="#fdfcd5" />二级部门</div>
          </el-row></el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row style="margin-top:10px">
        <slot name="table" />
        <!-- <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table> -->
      </el-row>
    </el-row>
    <!-- 下方按钮 -->
    <el-row style="margin-top:10px;text-align:center">
      <el-tooltip class="item" effect="dark" content="将当前报表存放至归档，归档可以多次，但只保留最后一次" placement="top-start">
        <el-button type="primary" size="medium" @click="guiDang">归档{{ date }}月份报表</el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="开始做下月考勤" placement="top">
        <el-button type="primary" size="medium" @click="newReport">新建报表</el-button>
      </el-tooltip>
      <el-button v-if="cancel" type="primary" size="medium" @click="btnCancel">取消</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    tabName: {
      type: String,
      default: '考勤统计'
    },
    cancel: {
      type: Boolean,
      default: false
    },
    date: {
      type: String,
      required: true
    },
    disShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: 'tab'
    }
  },
  methods: {
    exportExcel() {
      this.$emit('exportExcel')
    },
    guiDang() {
      this.$emit('guiDang')
    },
    newReport() {
      this.$emit('newReport')
    },
    btnCancel() {
      this.$emit('btnCancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #666;
}
::v-deep .el-table th.is-leaf{
    background-color: #fafafa;
    border-bottom: 2px solid #e8e8e8 ;
}
.tagTitle div{
    color: #555555;
    font-size: 15px;
}
.tagTitle .el-tag{
    margin: 0 10px;
    width: 15px;
    height: 15px;
    border-radius: unset;
    padding: 0;
    vertical-align: middle;
    border-style: unset;
    // overflow: hidden;
}
</style>
